<script setup>

import {useRolePage} from "@/composables/sys/role.js";
import {usePagination} from "@/composables/use-pagination.js";
import RoleSearch from "@/views/sys/role/components/role-search.vue";
import RoleTable from "@/views/sys/role/components/role-table.vue";
import RoleForm from "@/views/sys/role/components/role-form.vue";

const formShow = ref(false)
const idTemp = ref(null)

const {
  pagination,
  filters,
  queryParams,
  setPage,
  setPageSize,
  resetFilters
} = usePagination({
  name: null,
  code: null,
})

const {data, isLoading, refetch} = useRolePage(queryParams)
// 重置数据
const resetSearch = () => {
  resetFilters()
  refetch()
}
// 新增按钮
const handleAdd = () => {
  formShow.value = true
}
// 编辑按钮
const handleEdit = async (id) => {
  formShow.value = true
  idTemp.value = id
}
const pageChange = (page) => {
  setPage(page)
  refetch()
}

const pageSizeChange = (pageSize) => {
  setPageSize(pageSize)
  refetch()
}
// 关闭表单
const formClosed = () => {
  formShow.value = false
  idTemp.value = null
  refetch()
}
</script>

<template>
  <n-space vertical>
    <role-search  :filters="filters" :refetch="refetch" :reset="resetSearch"/>
    <role-table
        @on-edit="handleEdit"
        @on-add="handleAdd"
        :loading="isLoading"
        :data="data?.data?.records || []"
        :page="pagination.page"
        :page-size="pagination.pageSize"
        :item-count="Number(data?.data?.totalRow || 0)"
        @update:page="pageChange"
        @update:page-size="pageSizeChange"
    />
    <role-form :show="formShow" @close="formClosed" :id="idTemp"/>
  </n-space>
</template>

<style scoped>

</style>